{{ define "head" }}
<!--头开始-->
<!DOCTYPE html>
<html lang="zh-CN">

<!--================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.1
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <title>{{.UrlName}} | {{ index .GlobalConfig "app_name"}} </title>

    <!-- Favicons-->
    <link rel="icon" href="/statics/images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="/statics/images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->


    <!-- CORE CSS-->
    <link href="/statics/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="/statics/css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <!-- Custome CSS-->
    <link href="/statics/css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">

    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="/statics/js/plugins/prism/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="/statics/js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <link href="/statics/js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <link href="/statics/js/plugins/jquery.nestable/nestable.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <link href="/statics/js/plugins/data-tables/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <link href="/statics/js/plugins/sweetalert/sweetalert.css" type="text/css" rel="stylesheet"
          media="screen,projection">
</head>

<body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->

<!-- //////////////////////////////////////////////////////////////////////////// -->

<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed">
        <nav class="navbar-color">
            <div class="nav-wrapper">
                <ul class="left">
                    <li><h1 class="logo-wrapper"><a href="index.html" class="brand-logo darken-1"><img
                            src="/statics/images/materialize-logo.png" alt="materialize logo"></a> <span
                            class="logo-text">Materialize</span></h1></li>
                </ul>
                <ul class="right hide-on-med-and-down">
                    <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen"><i
                            class="mdi-action-settings-overscan"></i></a>
                    </li>
                    <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button"
                           data-activates="notifications-dropdown"><i class="mdi-social-notifications">
                        <small class="notification-badge">5</small>
                    </i>

                    </a>
                    </li>
                    <li><a href="#" data-activates="chat-out"
                           class="waves-effect waves-block waves-light chat-collapse"><i
                            class="mdi-communication-chat"></i></a>
                    </li>
                </ul>


                <ul id="notifications-dropdown" class="dropdown-content">
                    <li>
                        <h5>NOTIFICATIONS <span class="new badge">5</span></h5>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
                    </li>
                    <li>
                        <a href="#!"><i class="mdi-action-stars"></i> Completed the task</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
                    </li>
                    <li>
                        <a href="#!"><i class="mdi-action-settings"></i> Settings updated</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
                    </li>
                    <li>
                        <a href="#!"><i class="mdi-editor-insert-invitation"></i> Director meeting started</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
                    </li>
                    <li>
                        <a href="#!"><i class="mdi-action-trending-up"></i> Generate monthly report</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->

<!-- //////////////////////////////////////////////////////////////////////////// -->

<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">

        <!-- START LEFT SIDEBAR NAV-->
        <aside id="left-sidebar-nav">
            <ul id="slide-out" class="side-nav fixed leftside-navigation">
                <li class="user-details cyan darken-2">
                    <div class="row">
                        <div class="col col s4 m4 l4">
                            <img src="/statics/images/avatar.jpg" alt=""
                                 class="circle responsive-img valign profile-image">
                        </div>
                        <div class="col col s8 m8 l8">
                            <ul id="profile-dropdown" class="dropdown-content">
                                <li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
                                </li>
                                <li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
                                </li>
                                <li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
                                </li>
                                <li><a href="/logout"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
                                </li>
                            </ul>
                            <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#"
                               data-activates="profile-dropdown">{{.UserName}}</a>
                            <p class="user-roal">Administrator</p>
                        </div>
                    </div>
                </li>
                <!--导航菜单-->


                {{$url_superior_menu := .UrlSuperiorMenu}} <!--获取当前url数据库中上级菜单ID-->
                {{$url_id := .UrlId}}<!--获取当前url数据库中id-->

                {{ if eq $url_superior_menu ""}}
                <li class="bold active"><a href="/" class="waves-effect waves-cyan"><i
                        class="mdi-action-label-outline"></i>仪表盘</a>
                </li>
                {{ else }}
                <li class="bold"><a href="/" class="waves-effect waves-cyan"><i class="mdi-action-label-outline"></i>仪表盘</a>
                    {{ end }}

                <li class="no-padding">
                    <ul class="collapsible collapsible-accordion">

                        {{ range $k,$v :=$.MenuInfo}} <!--循环url-->
                        {{ if eq .menu_grade "1" }} <!--判断是否是一级菜单-->
                        {{ if eq $url_superior_menu $v.id}}  <!--如果当前访问url的上级菜单ID，为该顶级菜单ID，则class打开-->
                        <li class="bold"><a class="collapsible-header  waves-effect waves-cyan active">
                            {{ else }}   <!--不是则不打开-->
                        <li class="bold"><a class="collapsible-header waves-effect waves-cyan">
                            {{ end }} <!--结束判断-->
                            <i class="mdi-action-label-outline"></i>{{.menu_name}}</a>
                            <div class="collapsible-body">
                                <ul>
                                    {{ range $k1,$v1 :=$.MenuInfo}}   <!--嵌套循环urls-->
                                    {{ if eq $v1.superior_menu $v.id}}  <!--如果url的上级菜单ID，是顶级菜单ID 显示出来-->


                                    {{ if eq $url_id $v1.id }}      <!--如果访问的url是该url 则加上class-->
                                    <li class="active">
                                        {{ else }} <!--不是则不加-->
                                    <li class="">
                                        {{ end }}

                                        <a href="{{$v1.menu_url}}">{{$v1.menu_name}}</a>
                                    </li>

                                    {{end}}<!--结束判断-->
                                    {{ end }}
                                </ul>
                            </div>
                        </li>
                        {{end}}<!--结束循环-->
                        {{end}}<!--结束循环-->
                        <li class="li-hover">
                            <div class="row">
                                <div class="col s12 m12 l12">
                                    <div class="sample-chart-wrapper">
                                        <div class="ct-chart ct-golden-section" id="ct2-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </li>

                <!--导航菜单-->

            </ul>
            <a href="#" data-activates="slide-out"
               class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i
                    class="mdi-navigation-menu"></i></a>
        </aside>
        <!-- END LEFT SIDEBAR NAV-->

        <!-- //////////////////////////////////////////////////////////////////////////// -->

        <!-- START CONTENT -->
        <section id="content">

            <!--横向信息-->
            <!--breadcrumbs start-->
            <div id="breadcrumbs-wrapper">
                <!-- Search for small screen -->
                <div class="header-search-wrapper grey hide-on-large-only">
                    <i class="mdi-action-search active"></i>
                    <input type="text" name="Search" class="header-search-input z-depth-2"
                           placeholder="Explore Materialize">
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col s12 m12 l12">
                            <h5 class="breadcrumbs-title">{{.UrlName}}</h5>
                            <ol class="breadcrumbs">
                                <li><a href="/">仪表盘</a>
                                </li>
                                {{ range $k,$v := $.MenuInfo}}
                                {{ if eq $v.id $url_superior_menu }}
                                <li>{{$v.menu_name}}</a>
                                    {{ end }}{{ end }}
                                </li>
                                <li class="active">{{.UrlName}}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!--start container-->
            <div class="container">
                <div class="section">

                    <p class="caption">{{.UrlInstruction}}</p>
                    <div class="divider"></div>

                    <!--横向信息-->
{{ end }}